﻿@model Serene.ReportTree

@{
    ViewData["Title"] = "Reports";
}


@functions 
{
    public HtmlString renderMenu(Serene.ReportTree.Category category)
    {
        var sb = new StringBuilder();
        renderItems(sb, category);
        return new HtmlString(sb.ToString());
    }

    public void renderItems(System.Text.StringBuilder sb, Serene.ReportTree.Category category)
    {
        if (category.Reports != null)
        {
            int i = 0;
            foreach (var x in category.Reports)
            {
                sb.Append("<li class='report-item ");
                sb.Append(i++ % 2 == 0 ? "odd" : "even");
                sb.Append("'>");
                sb.Append("<a href='#' class='report-link' data-key='");
                sb.Append(x.Key);
                sb.Append("'>");
                sb.Append(HtmlEncoder.Encode(x.Title));
                sb.Append("</a></li>");
            }
        }

        if (category.SubCategories != null)
        {
            foreach (var x in category.SubCategories)
            {
                renderTree(sb, x);
            }
        }
    }


    public void renderTree(System.Text.StringBuilder sb, Serene.ReportTree.Category category)
    {
        sb.AppendLine("<li class='category expanded'>");
        sb.AppendLine("<div class='line'><span class='toggle'></span><span class='caption'>");
        sb.AppendLine(HtmlEncoder.Encode(category.Title));
        sb.AppendLine("</span></div>");

        if (category.SubCategories != null &&
            category.SubCategories.Count() > 0 ||
            category.Reports != null && category.Reports.Count() > 0)
        {
            sb.AppendLine("<ul class='" + (category.Reports != null ? "has-reports" : "") +
                "' style='display: block;'>");
            renderItems(sb, category);
            sb.AppendLine("</ul>");
        }
        sb.AppendLine("</li>");
    }
}


<div id="ReportPage" class="s-DataGrid">
    <div class="grid-title">
        <div class="title-text">Reports</div>
    </div>
    <div class="grid-toolbar s-Toolbar clearfix">
        <div class="s-QuickSearchBar"><input /></div>
    </div>
    <div class="report-box">
        <div class="report-list center">
            <ul>
            @renderMenu(Model.Root)
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(function () {
        new Serene.Common.ReportPage($('#ReportPage'));
        Q.initFullHeightGridPage($('#ReportPage'));
    });
</script>